
export default function thumbnail(homestay_detail) {
    //提升多处使用的元素到公共作用域，减少重复获取dom损失的性能
    const smallImg = document.querySelector('.overview .left .leftTop .smallPic img')
    const bigImg = document.querySelector('.overview .left .leftTop .bigPic img')
    //放大镜元素动态生成
    magnifyingGlassGenerate()
    function magnifyingGlassGenerate(params) {
        const smallPicNode = document.querySelector('.overview .left .leftTop .smallPic')
        const maskNode = document.querySelector('.overview .left .leftTop .smallPic .mask')
        const bigPicNode = document.querySelector('.overview .left .leftTop .bigPic')

        //通过DOMRect对象获取该元素相对于视口的距离
        const smallPicLeft = smallPicNode.getBoundingClientRect().left
        const smallPicTop = smallPicNode.getBoundingClientRect().top
        smallPicNode.onmouseenter = function () {
            maskNode.style.display = 'block'
            bigPicNode.style.display = 'block'
            smallPicNode.onmousemove = function (event) {
                //鼠标相对于视口的距离（client通常均意为视口）
                const mouseX = event.clientX
                const mouseY = event.clientY

                //mask蒙版布局宽度、高度
                const maskWidth = maskNode.offsetWidth
                const maskHeight = maskNode.offsetHeight
                let maskLeft = mouseX - smallPicLeft - maskWidth / 2
                let maskTop = mouseY - smallPicTop - maskHeight / 2
                //限制蒙版移动范围
                if (maskLeft < 0) {
                    maskLeft = 0
                } else if (smallPicNode.clientWidth - maskLeft < maskNode.offsetWidth) {
                    maskLeft = smallPicNode.clientWidth - maskNode.offsetWidth
                }
                if (maskTop < 0) {
                    maskTop = 0
                } else if (smallPicNode.clientHeight - maskTop < maskNode.offsetHeight) {
                    maskTop = smallPicNode.clientHeight - maskNode.offsetHeight
                }
                maskNode.style.left = maskLeft + 'px'
                maskNode.style.top = maskTop + 'px'
                //以极限移动值计算蒙版的移动距离与大图片移动距离的 比例
                const scale = (smallPicNode.clientWidth - maskNode.offsetWidth) / (bigImg.offsetWidth - bigPicNode.offsetWidth)
                bigImg.style.left = -maskLeft / scale + 'px'
                bigImg.style.top = -maskTop / scale + 'px'
            }
        }
        smallPicNode.onmouseleave = function () {
            maskNode.style.display = 'none'
            bigPicNode.style.display = 'none'
        }
    }
    //放大镜切换缩略图渲染
    // thumbnailRender()
    function thumbnailRender(params) {
        const oul = document.querySelector('.overview .left .leftBottom .thumbnail ul')
        let template = ''
        const thumbnail_img = homestay_detail.thumbnail_img
        for (let index = 0; index < thumbnail_img.length; index++) {
            // console.log(i);
            template += `
            <li><img src="${thumbnail_img[index]}" alt=""></li>
            `

        }
        oul.innerHTML = template
        // thumbnailSwitch()
    }
    //缩略图初始渲染及点击切换渲染
    function thumbnailSwitch() {
        smallImg.setAttribute('src', homestay_detail.thumbnail_img[0])
        bigImg.setAttribute('src', homestay_detail.thumbnail_img[0])
        const olis = document.querySelectorAll('.overview .left .leftBottom .thumbnail ul li')
        for (let i = 0; i < olis.length; i++) {
            olis[i].onclick = function () {
                smallImg.setAttribute('src', homestay_detail.thumbnail_img[i])
                bigImg.setAttribute('src', homestay_detail.thumbnail_img[i])
            }
        }
    }
    //缩略图移动
    // thumbnailMove()
    function thumbnailMove() {
        /**
         * 轮播移动效果的关键在于：
         * 已移动的距离、每次移动的步长、可移动的最大距离
         */
        const olis = document.querySelectorAll('.overview .left .leftBottom .thumbnail ul li')
        const oleftArrow = document.querySelector('.overview .left .leftBottom .leftArrow')
        const orightArrow = document.querySelector('.overview .left .leftBottom .rightArrow')
        const oul = document.querySelector('.overview .left .leftBottom .thumbnail ul')
        let distanceMoved = 0
        const stepSize = (olis[0].offsetWidth + 25) * 2
        const maximumDistance = (olis.length - 6) * (stepSize / 2)
        orightArrow.onclick = function (params) {
            distanceMoved -= stepSize
            if (distanceMoved < -maximumDistance) {
                distanceMoved = -maximumDistance
            }
            oul.style.left = distanceMoved + 'px'
        }
        oleftArrow.onclick = function (params) {
            distanceMoved += stepSize
            if (distanceMoved > 0) {
                distanceMoved = 0
            }
            oul.style.left = distanceMoved + 'px'
        }


    }
}